import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { Icon, Tooltip } from 'antd';
import './index.less';
import _ from 'lodash';
import cn from 'classnames';
import FingerItem from '@components/finger-item';
import { connect } from 'react-redux';

const prefix = 'detail-matrix';
const DetailMatrix = props => {
  const { detail, className, modules = [] } = props;
  const { name, sites } = detail;
  const hasOneDayModule = modules.includes('1day');

  const renderLayer = useCallback(detail => {
    const layers = ['application', 'support', 'service', 'system'];
    const titles = ['应用层', '支撑层', '服务层', '系统层'];
    const { ip } = detail;

    return (
      <div className="finger-stack">
        <div className="finger-stack-header">
          <div>
            <span>{ip}</span>
            &nbsp;&nbsp;
            <a href={`/asset-manage?ip="${ip}"`}>查看详情</a>
          </div>
          <div className="finger-stack-header-info">
            {hasOneDayModule && (
              <>
                <span>漏洞</span>
                <span className="has-right-border">{_.get(detail, 'onedayOids.length')}</span>
              </>
            )}

            <span>端口</span>
            <span>{_.get(detail, 'portInfos.length')}</span>
          </div>
        </div>
        {layers.map((layer, index) => {
          const title = titles[index];
          if (layer === 'system') {
            const os = _.get(detail, 'os');
            return (
              <div title={title} className={cn('layer', layer)} key={index}>
                {os ? <FingerItem name={os} key={os} fullName={os} rawType="os" /> : '-'}
              </div>
            );
          } else {
            const components = _.uniqBy(
              _.filter(_.flatten(_.map(detail.portInfos, 'components')), {
                layer
              }),
              o => `${o.fullName || ''}_${o.rawType || ''}`
            );
            return (
              <div title={title} className={cn('layer', layer)} key={index}>
                {components.length
                  ? components.map(component => (
                      <FingerItem {...component} key={component.fullName} />
                    ))
                  : '-'}
              </div>
            );
          }
        })}
      </div>
    );
  }, []);

  const renderList = () => {
    const ipDivList = Array(256)
      .fill(0)
      .map((item, index) => (
        <div key={index} className={`${prefix}-content-item`}>
          {index}
        </div>
      ));

    // 有资产的替换原节点
    sites.forEach(site => {
      const { ipIndex } = site;
      const offsetX = ipIndex % 16 === 15 ? -190 : ipIndex % 16 === 14 ? -95 : 0;

      ipDivList.splice(
        ipIndex,
        1,
        <Tooltip
          title={renderLayer(site)}
          align={{
            offset: [offsetX, 0]
          }}
          overlayClassName={'finger-info-layer'}
          placement={'bottom'}
        >
          <div key={ipIndex} className={`${prefix}-content-item-active`}>
            {ipIndex}
          </div>
        </Tooltip>
      );
    });
    return ipDivList;
  };

  return (
    <div className={`${prefix} ${className}`}>
      <div className={`${prefix}-header`}>
        <div className={`${prefix}-header-name`}>{name}</div>
        <div className={`${prefix}-header-button`}>
          <span className={`${prefix}-header-button-active`} />
          <span>存活</span>
          <Tooltip title={'ping有响应或者有存活端口的为存活IP'}>
            <Icon type="question-circle" />
          </Tooltip>
          <span className={`${prefix}-header-button-negative`} />
          <span>未存活</span>
          <Tooltip title={'ping没有响应而且没有存活端口的为未存活IP'}>
            <Icon type="question-circle" />
          </Tooltip>
        </div>
      </div>
      <div className={`${prefix}-content`}>{renderList()}</div>
    </div>
  );
};

DetailMatrix.propTypes = {
  detail: PropTypes.objectOf({
    name: PropTypes.string.isRequired,
    sites: PropTypes.array.isRequired
  }).isRequired,
  className: PropTypes.string,
  modules: PropTypes.array
};

const mapStateToProps = state => {
  return {
    modules: _.get(state, 'auth.cert.modules', [])
  };
};

export default React.memo(
  connect(
    mapStateToProps,
    null
  )(DetailMatrix)
);
